<template>
  <gui-page ref="guiPage" :customHeader="true">
    <template v-slot:gHeader>
      <nav-bar-custom left-icon="left" :title="data.title">
      </nav-bar-custom>
    </template>
    <template v-slot:gBody>
      <view class="imgs">
        <!-- 图片展示区域 -->
        <image v-if="playIndex === null" src="http://afl-private.oss-us-east-1.aliyuncs.com/afl-app/img/sop_default.jpg"
          style="width:100%" mode="widthFix"></image>
        <view v-else>
          <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="data.imgList" :current="data.current"
            :mode="data.mode" :dots-styles="data.dotsStyles" field="content">
            <swiper class="swiper-box" @change="change" :current="data.swiperDotIndex">
              <swiper-item v-for="(item, index) in data.imgList" :key="index">
                <view class="swiper-item" :class="'swiper-item' + index">
                  <image :src="item.url" style="width:100%" mode="widthFix"></image>
                </view>
              </swiper-item>
            </swiper>
          </uni-swiper-dot>
        </view>
      </view>
    </template>
  </gui-page>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app"
import { reactive, ref } from 'vue'
import { navigate } from '@/utils/routerSkip.js';
import GuiSwitchNavigation from '@/Grace6/components/gui-switch-navigation.vue'
import NavBarCustom from '@/components/common/navBarCustom.vue'
import GuiPage from '@/Grace6/components/gui-page.vue'
import { getSopDetail, getSopFiles } from "@/api/api";
import parserHtml from "@/Grace6/js/parserHTML.js";
import GuiArticleInfo from "@/Grace6/components/gui-article-info.vue";

const data = reactive({
  title: '',
  src: 'http://afl-private.oss-us-east-1.aliyuncs.com/afl-app/img/sop_default.jpg',
  poster: '',
  imgList: [],
  modeIndex: -1,
  styleIndex: -1,
  current: 0,
  mode: 'default',
  dotsStyles: {},
  swiperDotIndex: 0,
  dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					},
					{
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					{
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
					}
				],
})

const fileList = reactive([])
let playIndex = ref(null)  //是否展示图片

onLoad((option) => {
  const uuid = option.uuid
  getSopDetail(uuid).then(res => {
    // console.log(res)
    data.detail = parserHtml.parserHTML(res.description);
    
    data.src = res.rquestUrl
    data.title = res.title;
  })
  getSopFiles(uuid).then(res => {
    if (res.length) {
      console.log(res)
      res.data.forEach((item, index, arr) => {
        if (item.suffix === 'png'||item.suffix === 'jpg'||item.suffix === 'svg'||item.suffix === 'gif'||item.suffix === 'psd'||item.suffix === 'tif'||item.suffix === 'jpeg') {
          data.imgList.push(item)
        }
      })
      // data.imgList = res
      playIndex = 'img'
    }
  })
})

const change = (e) => {
  data.current = e.detail.current
}
const selectStyle = (index) => {
  data.dotsStyles = data.dotStyle[index]
  data.styleIndex = index
}
const selectMode = (mode, index) => {
  data.mode = mode
  data.modeIndex = index
  data.styleIndex = -1
  data.dotsStyles = data.dotStyle[0]
}
const clickItem = (e) => {
  data.swiperDotIndex = e
}
const onBanner = (index) => {
  console.log(22222, index);
}
</script>

<style scoped lang="scss">
.imgs{
  display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
  background-color: #404040;
  box-shadow: inset 1px 0 0 hsl(0deg 0% 100% / 5%);
}
.swiper-box {
  height: calc(100vh - 88rpx);
  box-sizing: border-box;
  padding-top: 50%;
  color: #fff;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // height: 300px;
  color: #fff;
}

.swiper-item0 {
  background-color: #cee1fd;
}


.image {
  width: 800rpx;
}

/* #ifndef APP-NVUE */
::v-deep .image img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

/* #endif */

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    margin: 8px auto 0 auto ;
  }

  .image {
    width: 100%;
    height: 100%;
  }
}

.uni-bg-red {
  background-color: #ff5a5f;
}

.uni-bg-green {
  background-color: #09bb07;
}

.uni-bg-blue {
  background-color: #007aff;
}

.example-body {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  padding: 20rpx;
}

.example-body-item {

  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 15rpx;
  padding: 15rpx;
  height: 60rpx;
  /* #ifndef APP-NVUE */
  display: flex;
  padding: 0 15rpx;
  /* #endif */
  flex: 1;
  border-color: #e5e5e5;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
}

.example-body-item-text {
  font-size: 28rpx;
  color: #333;
}

.example-body-dots {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50px;
  background-color: #333333;
  margin-left: 10rpx;
}

.active {
  border-style: solid;
  border-color: #007aff;
  border-width: 1px;
}
</style>